<template>
  <div>
    <el-row :gutter="15">
      <el-col :xs="24" :sm="10" :lg="8">
        <card-box
          title="角色列表"
          color="linear-gradient(60deg,#ef5350,#e53935)"
          icon="icon-template_template"
          maxHeight="450px"
          minHeight="450px"
        >
          <div slot="card-content">
            <el-table
              ref="singleTable"
              :data="tableData"
              highlight-current-row
              @current-change="handleCurrentChange"
              style="width: 100%"
            >
              <el-table-column property="name" label="角色名称"></el-table-column>
              <el-table-column property="describe" label="角色描述"></el-table-column>
            </el-table>
          </div>
        </card-box>
      </el-col>
      <el-col :xs="24" :sm="14" :lg="16">
        <card-box
          title="权限设置/超级管理员"
          color="linear-gradient(60deg,#ffa726,#fb8c00)"
          icon="icon-template_template"
          maxHeight="450px"
          minHeight="450px"
        >
          <div slot="card-content">
            <v-jstree
              :data="treeData"
              no-dots
              show-checkbox
              multiple
              allow-batch
              allow-transition
              whole-row
              @item-click="itemClick"
            ></v-jstree>

            <!-- <v-jstree :data="asyncData" :async="loadData" no-dots allow-transition whole-row @item-click="itemClick"></v-jstree> -->
          </div>
        </card-box>
      </el-col>
    </el-row>
  </div>
</template>
<script>
//vue-jstree 文档地址: https://python.ctolib.com/article/wiki/81493
import VJstree from 'vue-jstree'
import CardBox from "@/components/CardBox"
export default {
  name: 'jsTreeForm',
  components: { CardBox, VJstree },
  data () {
    return {
      asyncData: [],
      loadData: function (oriNode, resolve) {
        var id = oriNode.data.id ? oriNode.data.id : 0
        setTimeout(() => {
          let data = []
          if (id > 200) {
            data = []
          }
          else {
            data = [
              {
                "text": "New Item 1..." + id, "isLeaf": id > 100
              },
              {
                "text": "New Item 2..." + id, "isLeaf": id > 100
              }
            ]
          }
          resolve(data)
        }, 500)
      },
      treeData: [
        {
          "id": "111111111",
          "text": "权限管理",
          "isLeaf": true,
          "opened": true,
          "children": [
            {
              "id": "1111111111",
              "text": "模块管理",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "角色授权",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "模块管理",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "角色授权",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "模块管理",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "角色授权",
              "icon": "fa fa-warning icon-state-danger"
            }
          ]
        },
        {
          "text": "客户管理",
          "isLeaf": true,
          "opened": true,
          "children": [
            {
              "text": "模块管理",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "角色授权",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "模块管理",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "角色授权",
              "icon": "fa fa-warning icon-state-danger"
            }
          ]
        },
        {
          "text": "联系人管理",
          "isLeaf": true,
          "opened": true,
          "children": [
            {
              "text": "模块管理",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "角色授权",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "模块管理",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "角色授权",
              "icon": "fa fa-warning icon-state-danger"
            }
          ]
        },
        {
          "text": "行程管理",
          "isLeaf": true,
          "opened": true,
          "children": [
            {
              "text": "模块管理",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "角色授权",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "模块管理",
              "icon": "fa fa-warning icon-state-danger"
            },
            {
              "text": "角色授权",
              "icon": "fa fa-warning icon-state-danger"
            }
          ]
        },

      ],
      tableData: [{ name: '111', describe: '1a1a1a1a1a11a1a1a1' },
      { name: '222', describe: '2a2a2a2a2a2a2a2a2a2a2' },
      { name: '333', describe: '2a2a2a2a2a2a2a2a2a2a2' },
      { name: '444', describe: '2a2a2a2a2a2a2a2a2a2a2' },
      { name: '555', describe: '2a2a2a2a2a2a2a2a2a2a2' },
      { name: '666', describe: '2a2a2a2a2a2a2a2a2a2a2' },
      { name: '777', describe: '2a2a2a2a2a2a2a2a2a2a2' },
      { name: '888', describe: '2a2a2a2a2a2a2a2a2a2a2' },
      { name: '999', describe: '2a2a2a2a2a2a2a2a2a2a2' },
      { name: '1112', describe: '2a2a2a2a2a2a2a2a2a2a2' },
      { name: '12122', describe: '2a2a2a2a2a2a2a2a2a2a2' },],
      currentRow: null,
      ruleForm: {
        name: '',
        region: '',
        icon: '',
        describe: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入模块ID:', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: false, message: '请选择有效性', trigger: 'change' }
        ],
        describe: [
          { required: true, message: '请填写模块地址', trigger: 'blur' }
        ],
        icon: []
      }
    };
  },
  methods: {
    //jstree节点点击事件
    itemClick (node, item, e) {
      console.log(node)
      console.log(item)
      console.log(node.model.text + ' clicked !')
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    //表格单选事件
    handleCurrentChange (currentRow, oldCurrentRow) {
      console.log(currentRow)
      console.log(oldCurrentRow)
      this.currentRow = currentRow;
    }

  }
}
</script>
<style lang="scss" scoped>
form {
  overflow-x: hidden;
}
</style>
